<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{::style},~{})">
<title>角色列表</title>
<style>
button a {
	color: #fff !important;
}
</style>
</head>
<body>
	<div id="roleManage" class="mainPadding" style="display: none;">
		<el-breadcrumb separator="/" class="elBreadcrumb marginB20">
  		<el-breadcrumb-item>Home</el-breadcrumb-item> 
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
  		<el-breadcrumb-item>角色管理</el-breadcrumb-item> 
    </el-breadcrumb>
		<el-row class="marginB20"> 
      <el-col :span="17"> 
        <el-button type="primary"> 
          <a href="/role/roleManager/addRolePre"><i class="el-icon-plus"></i>添加</a></el-button> <el-button type="success" @click="updateRoleInfo"><i class="el-icon-edit"></i>修改</el-button> 
          <el-button type="danger" @click="deleteFun"><i class="el-icon-delete"></i>删除</el-button> </el-col> 
          <el-col :span="7"> 
            <el-input v-model="roleListQuery.roleName" placeholder="请输入角色名称" class="input-with-select"> 
              <el-button slot="append" @click="queryRoleDataList" icon="el-icon-search">搜索</el-button> 
            </el-input> 
          </el-col> 
        </el-row>
        <div class="mainSearchBg"> 
      		<el-row> 
            <el-table ref="multipleTable" tooltip-effect="dark"
      			style="width: 100%" @selection-change="handleSelectionChange" border
      			:data="dataTable"> 
              <el-table-column align="center" prop="id" @selection-change="handleSelectionChange" type="selection" width="55"></el-table-column> 
              <el-table-column align="center" prop="roleName" label="角色名称"></el-table-column> 
              <el-table-column align="center" prop="userCount" label="角色内成员（人）"> 
                <template slot-scope="scope" v-if="scope.row.userCount!=0"> 
                  <span class="bluecolor cursorP" @click="openUserInfoTable(scope.row.id)">{{scope.row.userCount }}</span> 
                </template> 
                <template slot-scope="scope"> 
                  <el-button v-if="scope.row.userCount!=0" type="text" @click="openUserInfoTable(scope.row.id)">{{scope.row.userCount }}</el-button> 
                  <span v-else>0</span> 
                </template> 
              </el-table-column> 
            </el-table> 
          </el-row>
        </div>
    		<!-- dialog -->
    		<el-dialog title="角色内成员" :visible.sync="dialogFormVisible">
      		<el-form :model="userForm"> 
            <el-row class="marginB10 greybg padding20"> 
              <el-row :gutter="20">
      		      <el-col :span="6"> 
                  <el-input v-model="userForm.name" placeholder="姓名"></el-input> 
                </el-col> 
                <el-col :span="6"> 
                  <el-input v-model="userForm.username" placeholder="登录名"></el-input> 
                </el-col> 
                <el-col :span="6"> 
                  <el-input v-model="userForm.phone" placeholder="手机号"></el-input> 
                </el-col> 
                <el-col :span="2"> 
                  <el-button type="primary" size="medium" @click="queryUserDataList" icon="el-icon-search">搜索</el-button> 
                </el-col> 
              </el-row> 
            </el-row> 
            <el-table tooltip-effect="dark" style="width: 100%" border :data="dataTableUserRole" class="marginB10"> 
              <el-table-column align="center" prop="id" type="index" label="序号" width="55"></el-table-column>
              <el-table-column align="center" prop="name" label="姓名"></el-table-column>
      		    <el-table-column align="center" prop="username" label="登录名"></el-table-column>
      		    <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
      		    <el-table-column align="center" prop="orgName" label="所属组织"></el-table-column>
      		  </el-table> 
            <table-pagination :pager="userpager" @change="queryUserDataList"></table-pagination>
      		</el-form> 
        </el-dialog>
	  </div>
</body>
<div th:include="_footer_include :: #jsLib"></div>
<script>
var roleListVM =new Vue({
        el: '#roleManage',
        data: function() {
            return {
                searchInput:'',
                dataTableUserRole: [],
                roleListQuery:{
                	roleName:'',
                },
                dataTable: [],
                multipleSelection: [],
                dialogFormVisible: false,
                curRoleId:'',
                form: {
                    name: '',
                    remark: '',
                    delivery: false,
                    type: []
                },
                userForm:{
                  username:'',	
                  name:'',	
                  phone:'',	
                },
                formLabelWidth: '120px',
                currentPage: 1,//默认第一页 
                userpager:{
                    total: 0,
    	            currentPage: 1,
    	            pageSize: 20,
                },
                storeForm:{
                  roleName:'',
                },
                storeId: '',
                scrollTop: 0,
            }             
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },	
             queryRoleDataList(){//查询按钮
            	 var param = this.roleListQuery;
                  axios.post('/role/roleManager/queryRoleList',param).then(function (response) {
                    if(null===response||response.data==null||response.data.code!='0'){
                    	roleListVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                          }); 
                        return ;
                    }else{
                      roleListVM.dataTable =response.data.data; 

                      // 取出存储的id
                       if(roleListVM.storeId){
                           roleListVM.$nextTick(function(){
                              var storage = [];
                              roleListVM.dataTable.forEach(function(item, index){
                                  if(item.id === roleListVM.storeId ){
                                      storage.push(roleListVM.dataTable[index]);
                                  }
                              })
                              roleListVM.toggleSelection(storage);
                              roleListVM.$el.querySelector('.el-table__body-wrapper').scrollTop = roleListVM.scrollTop;
                          })
                      }
                      removeSessionStore ("roleManageStoreForm");
                      removeSessionStore ("roleManageOtherVal");
                      roleListVM.paginationShow = true;
                      roleListVM.storeForm = roleListVM.roleListQuery;

                    }
                  })
                  .catch(function (error) {
                    console.log(error);
                  })
                  .then(function () {
                  });  
                  
              },
              toggleSelection(rows) { // table select 默认选中fn
                  if (rows) {
                      rows.forEach(row => {
                          this.$refs.multipleTable.toggleRowSelection(row,true);
                      });
                  } else {
                      this.$refs.multipleTable.clearSelection();
                  }
              },
              openUserInfoTable(roleId){
            	 //打开角色下的成员信息 
            	 roleListVM.dialogFormVisible = true;
            	 roleListVM.curRoleId=roleId;
            	 roleListVM.userForm.username='';	
            	 roleListVM.userForm.name='';	
            	 roleListVM.userForm.phone='';
            	 this.queryUserDataList();
              },
              queryUserDataList(){
            	  //查询角色下用户成员
            	  var  param={};
            	  param.username=roleListVM.userForm.username;
            	  param.name=roleListVM.userForm.name;
              	  param.phone=roleListVM.userForm.phone;
                  param.roleId=roleListVM.curRoleId;
                  param.pageSize=roleListVM.userpager.pageSize ;
                  param.pageNum=roleListVM.userpager.currentPage ;
                  axios.post('/role/roleManager/queryUserList',param).then(function (response) {
                      if(null===response||response.data==null||response.data.code!='0'){
                    	  	roleListVM.$message({
                                message: "接口调用失败",
                                type: 'error'
                              });
                          return ;
                      }
                    
                       var resobj= response.data;
                       var pageData=resobj.data;
                       roleListVM.userpager.total= pageData.total;
                       roleListVM.userpager.currentPage = pageData.currentPage;
                       roleListVM.userpager.pageSize = pageData.pageSize;
                       roleListVM.dataTableUserRole =pageData.data; 
                    })
                    .catch(function (error) {
                      console.log(error);
                    })
                    .then(function () {
                    });  
              },
               updateRoleInfo(){
            	//修改角色  
              	var rows = this.multipleSelection;
                  if(rows.length!=1){
                      this.$message({
                         message: '请选择一条数据进行修改',
                         type: 'warning'
                       });
                      return;
                  }
                  // 存储选中信息--start
                    var clueId=rows[0].id;  
                    setSessionStore("roleManageStoreForm", this.storeForm);
                    var otherVal = {
                        // "currentPage": this.pager.currentPage,
                        "clueId": clueId,
                        "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
                    }
                    setSessionStore("roleManageOtherVal", otherVal);
                    // 存储选中信息--end 
                  // window.location.href="/role/roleManager/updateRolePre?roleId="+rows[0].id; 
                  window.location.href="/role/roleManager/updateRolePre?roleId="+clueId; 
            	  
              },
            // 删除
            deleteFun() {
            	  
              var deleIpInfo= roleListVM.multipleSelection;
              if(deleIpInfo.length <1){
                  this.$message({
                     message: '请选择删除数据',
                     type: 'warning'
                   });
                  return;
              }  
                this.$confirm('删除后此角色信息将不存在，确认删除吗？', '消息提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                	//删除角色
                	var deleIpInfo= roleListVM.multipleSelection;
    	        	var ids=[];
    	            if(null!=deleIpInfo){
    	             for ( var i = 0; i <deleIpInfo.length; i++){
    	            	ids.push(deleIpInfo[i].id);
    	              }
    	            }
    	            var param={};
   	                param.delIds=ids;
    	            axios.post('/role/roleManager/qeuryRoleByUserId',param).then(function (response) {
    	            if(response.data.data.length>0) {
    	             roleListVM.$message({
                            type: 'warn',
                            message: '本角色已经关联到用户,需要将角色下用户进行转移后,方可进行角色删除操作'
                        }); 
    	               return ;
    	            }
    	             param.deleteIds=ids;
                     axios.post('/role/roleManager/deleteRoleInfo',param).then(function (response) {
                       if(null===response||response.data==null||response.data.code!='0'){
                    	  	roleListVM.$message({
                                message: "接口调用失败",
                                type: 'error'
                              });
                            return ;
                       } 
                       
                       roleListVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                    	   roleListVM.queryRoleDataList();
                  	  }});
                     })
                     .catch(function (error) {
                       console.log(error);
                     })
                     .then(function () {
                    	
                     });  
    	            });	
                 
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            // 分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
         },
         created(){
            // 进入页面判断有是否有存储值
            var storeVal = getSessionStore("roleManageStoreForm");
            var otherVal = getSessionStore("roleManageOtherVal");
            if(storeVal && otherVal){
                this.roleListQuery = storeVal;
                // this.$set(this.pager,"currentPage",otherVal.currentPage);
                this.storeId = otherVal.clueId;
                this.scrollTop = otherVal.scrollTop;
            }
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.userpager.pageSize = localVal;}
        	  this.queryRoleDataList();
         },
         mounted(){
            document.getElementById('roleManage').style.display = 'block';
        }
        
    })
</script>
</html>